<template>
<!--   兑换会员 -->
    <div class="usecart">
<Top><p>兑换会员</p></Top>
        <div class="page_container">
                <p class="buy_for"> 成功兑换后将关联到当前帐号：
                    <span>{{username}}</span>
                </p>
                <form class="form_style">
                    <input type="text" name="cartNumber" maxlength="10" placeholder="请输入10位卡号">
                    <input  type="text" name="passWord" maxlength="6" placeholder="请输入6位卡密">
                </form>
                <p class="determine" @click="determine">兑换</p>
          <div class="Binding">
              <h3>——温馨提示——</h3>
              <p>新兑换的会员服务，权益以「会员说明」为准。</p>
              <p>月卡:<span>30次减免配送费。</span></p>
              <p>季卡:<span>90次减免配送费。</span></p>
              <p>年卡:<span>360次减免配送费。</span></p>
              <p data-v-3e3dbf9c="">＊仅限蜂鸟专送订单，每日最多减免3单，每单最高减免4元（一个月按31天计算）</p>
          </div>
        </div>
<!---------------------------------------------------------------------->
        <!-----------------弹框-------------------------->
<!--        <div class="top" :class="{topActive:alertShow}">-->
<!--            <div class="icon">-->
<!--                <span></span>-->
<!--                <span></span>-->
<!--            </div>-->
<!--            <p class="tip_text">无效的卡号</p>-->
<!--            <div class="confrim" @click="btnClick">确认</div>-->
<!--        </div>-->
<Tan><p>无效的卡号</p></Tan>

    </div>


</template>

<script>

    import Top from "@/components/Top";
    import Tan from "@/components/Tan";
    export default {
        name: "Usecart",
      components: {Tan, Top},
      data:function(){
          return{
              username:'',
              alertShow:false
          }
        },
        methods:{
            tovipcard(){
                this.$router.push("/vipcard")
            },
            btnClick(){
                this.alertShow = false;
            },
            determine(){
              this.$store.commit("clicktan",true);
            }
        },
        created() {
            let minemessage=JSON.parse(localStorage.user);
            this.minemessage=minemessage;
            this.username=this.minemessage["username"];
            console.log(this.username)
        }
    }
</script>

<style scoped>
    .head{
        position: fixed;
        top: 0rem;
    }
    .usecart{
        position: absolute;
        top: 0rem;
        left: 0rem;
        height: 41.5rem;
        width: 23.4rem;
        background-color: #f5f5f5;
    }
    .head{
        position: fixed;
        top: 0;
    }
.page_container{
    //padding-top: 3rem;
}
    .buy_for{
        font-size: .9rem;
        color: #666;
        line-height: 2.8rem;
        padding-left: .7rem;
    }
    input{
        height: 2.8rem;
        border: 1px solid transparent;
        border-bottom: 1px solid #f5f5f5;
        text-indent:1.2rem;

    }
    .form_style{
        display: flex;
        flex-direction: column;
    }
    .determine{
        background-color:#4cd964;
        font-size: 1rem;
        color: #fff;
        text-align: center;
        margin: 0 .7rem;
        line-height: 2.8rem;
        border-radius: .2rem;
        margin-top: .7rem;
        font-weight: 700;
    }
    .Binding{
        margin-top: 1rem;
    }
    .Binding h3{
        text-align: center;
        font-weight: 400;
        font-size: 1rem;
        color: #aaa;
        margin-bottom: .6rem;
    }
    .Binding p{
        padding-left: 2rem;
    }
   .Binding p{
        font-size: .8rem;
        color: #aaa;
        line-height: 1.4rem;
    }
    .top{
        position: relative;
        top:-10rem;
        left:3rem;
        width: 18rem;
        height: 11rem;
        animation: tipMove .4s;
        background-color: #fff;
        padding-top: .6rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 1px;
        border-radius: .25rem;
        display: none;

    }
    .top .icon{
        width: 4rem;
        height:4rem;
        border: .2rem solid #f8cb86;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: absolute;
        top: 1rem;
        left:7rem;

    }
    .top .icon span:first-of-type{
        width: .14rem;
        height: 1.5rem;
        background-color: #f8cb86;
    }
    .top .icon span:nth-of-type(2){
        width: .22rem;
        height: .2rem;
        border: 1px;
        border-radius: 50%;
        margin-top: .2rem;
        background-color: #f8cb86;
    }
    .tip_text{
        font-size: 1rem;
        color: #333;
        line-height: .9rem;
        text-align: center;
        margin-top: 5.5rem;
        padding: 0 .4rem;
    }
    .confrim {
        font-size: 1rem;
        color: #fff;
        font-weight: 700;
        margin-top:2rem;
        background-color: #4cd964;
        width: 100%;
        text-align: center;
        line-height:3rem;
        border: 1px;
        border-bottom-left-radius: .25rem;
        border-bottom-right-radius: .25rem;
    }
    .topActive{
        display: block;
    }
</style>